<template>
	<!-- 头部区域 -->
	<navbar :title="title"></navbar>

	<div class="detail_box">
		<img :src="this.goods.image" class="detail_img">
		<div class="detail_price">
			<div class="danwei">¥</div>
			<div class="num">{{this.goods.price}}</div>
		</div>
		<div class="detail_title">{{this.goods.name}}</div>
		<div class="onbutton">
			<button type="warn" size="mini" class="addCart" @click="addCart(this.goods)">加入购物车</button>
			<!-- <div class="addCart" @click="addCart(this.goods)">立即购买</div> -->
		</div>
		
		<div class="detail_content">
			详情
		</div>
	</div>

</template>

<script>
	import navbar from "@/components/public/navbar.vue"
	export default {
		components: {
			navbar
		},
		data() {
			return {
				goods: {},
				id: "",
				title: "商品详情",
				options:[]
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getProductDetail(this.id);
		},
		methods: {
			async getProductDetail(id) {
				var response = await this.$http.getProductDetail({
					"id": id
				})
				if (response.code == 1) {
					console.log(response.data)
					// return 
					this.goods = response.data
				}
			},
			async addCart(that) {
				var parms = {}
				parms.user_id = this.$store.state.userInfo.userId
				parms.product_id = that.id
				parms.quantity = 1
				var response = await this.$http.addCart(parms)
				if (response.code == 1) {
					uni.showToast({
						title: "已添加购物车",
						icon: 'success',
						duration: 3000 // 持续时间，单位为毫秒
					})
					uni.switchTab({
						url: '/pages/cart/index' // 新页面的路径
					})
				}

			}

		},
	}
</script>

<style>
	.detail_box {
		padding: 5px;
		margin-top: 40px;

	}

	.detail_img {
		width: 305px;
		height: 305px;
		margin-top: 10px;
	}

	.detail_price {
		/* border: 1px solid red; */
		padding-left: 20px;
		color: red;
		font-weight: 700;
		font-family: initial;

	}

	.detail_price .num {
		font-size: 25px
	}

	.detail_price .danwei {
		font-size: 8px;
		line-height: 40px;
		font-weight: 600;
		float: left;
	}

	.detail_title {
		font-size: 14px;
		font-weight: 600;
		/* border: 1px solid red; */
		margin-top: 10px;
	}

	.onbutton {
		margin-top: 10px;
		/* border: 1px solid red;	 */
		height: 50px;
	}
	.addCart{
		margin-top: 10px;
		float: right;
		/* width: 100px; */
		/* border: 1px solid red; */
	}

	.detail_content {
		margin-top: 10px;
		color: aqua;
		/* border: 1px solid red; */
	}
</style>